<template>
  <div id="wrapper">
    <ExtendsElSelect 
    v-bind="$attrs"
    v-on="$listeners"
    :value-key="signData.id"
    @visible-change="visibleChange"
  >
      <el-option
        v-for="item in store.data"
        :key="item[signData.id]"
        :label="item[signData.label]"
        :value="signData.value ? item : item[signData.value]">
      </el-option>
      <template slot="empty">
        <div class="inner" style="display: flex; align-items: center; justify-content: center;">
          <el-button v-if="store.status === 3" @click="retry">重试</el-button>
          <el-button v-if="store.status === 2">超时</el-button>
        </div>
      </template>
    </ExtendsElSelect>
  </div>
</template>

<script>
/**
 * 下拉框会出现两种情况 单选是一个对象 多选是一个数组对象
 * 使用props接收store、model、signData、value 还是直接使用 v-bind 和 v-on 属性透传 自由选择/情景需求
 * item的值是一个对象时 一定要设置value-key属性 否则会报错
 * 
 * 实现时 注意合并数组重复对象即可
 */

import ExtendsElSelect from './ExtendsElSelect.vue'

export default {
  name: 'StoreSelectComp',
  props: ['signData'],
  inject: ['store'],
  components: {
    ExtendsElSelect
  },
  methods: {
    async loadData(){
      try {
          await this.store.loadData()          
      } catch (error) {
        console.log(error);
      }
    },
    visibleChange(val) {
      if(val){
        this.loadData()
      }
    },
    retry(){
      this.loadData()
    }
  }
}
</script>